<template>
	<view class="mywrap">
		<view class="menu-list">
			<view v-if="item.isShow" class="menu-item" :class="{borb: borderShow(index) }" v-for="(item,index) in menuList" :key="index"
				@click="menuClick(item)">
				<text class="title">{{item.name}}</text>
				<view class="right c999 flex-align">
					<image class="avatar-img" :src="item.remark" v-if="!index" mode="aspectFill"></image>
					<view class="remark fz28" :style="{color: item.color || ''}" v-else>
						<text>{{item.remark}}</text>
					</view>
					<text class="iconfont iconright ml20 fz24" v-if="item.url || item.handler"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let that;
	import homeApi from "@/api/home.js"
	import personalApi from "@/api/personal.js"
	export default {
		data() {
			return {
				menuList: [{
						name: '头像',
						remark: '',
						handler: 'changeAvatar',
						isShow: true
					},
					{
						name: '手机号码',
						remark: '',
						isShow: true
					},
					{
						name: '昵称',
						remark: '',
						handler: 'goEditNickName',
						isShow: true
					}
				],
				modalShow: false,
				
				userInfo: {}
			}
		},
		onShow() {
			that = this;
			this.getUserInfo()
		},
		computed: {
			borderShow() {
				return (index) => {
					return index != 3 && index != 6
				}
			}
		},
		methods: {
			async getUserInfo() {
				let res = await homeApi.getUserInfo()
				if (res.code === 1) {
					this.userInfo = res.data;
					this.filterMenu()
				} else {
					this.$common.msgShow(res.msg)
				}
			},

			// 给菜单赋值
			filterMenu() {
				let {
					avatar,
					mobile,
					nickname,
				} = this.userInfo
				let mobileTxt = mobile.slice(0, 3) + '****' + this.userInfo.mobile.slice(7, 11)
				let params = [avatar, mobileTxt, nickname]
				this.menuList.forEach((ele, index) => {
					ele.remark = params[index]
				})
			},
			//菜单点击时事件
			menuClick(item) {
				if (item.handler) {
					this[item.handler]()
				} else if (item.url) {
					this.$common.href(item.url)
				}
			},
			changeAvatar() {
				uni.showActionSheet({
					itemList: ['查看头像', '更换头像'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.previewImage({
								urls:  [that.userInfo.avatar]
							});
						} else {
							that.upAvatar()
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			upAvatar() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						if (res.tempFilePaths.length > 0) {
							for (let i = 0; i < res.tempFilePaths.length; i++) {
								this.toUpload(res.tempFilePaths[i]);
							}
						}
					}
				});
			},
			//获取OSS图片数据
			toUpload(img) {
				homeApi.uploadImg(img).then(res => {
					console.log(res)
					if (res.code === 1) {
						this.upUserInfo(res.data.url)
					} else {
						this.$common.msgShow(res.msg);
					}
				})
			},
			// 修改个人信息
			async upUserInfo(url) {
				let params = {
					avatar: url,
					rLoading: true
				}
				let res = await personalApi.editUserInfo(params)
				if (res.code === 1) {
					this.$common.msgShow('修改成功')
					this.getUserInfo()
				} else {
					this.$common.msgShow(res.msg)
				}
			},
			// 修改昵称
			goEditNickName() {
				let url = `/pagesOrder/nickNameEdit/nickNameEdit?type=0&name=${this.userInfo.nickname}`
				this.$common.href(url)
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url(@/common/css/iconfont.css);
	@import url(@/common/css/reset.css);

	.mywrap {
		position: relative;
		min-height: 100vh;
		background-color: #F9F7FC;
		padding-top: 20rpx;
	}

	.menu-list {

		.menu-item {
			height: 120rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			background: #FFFFFF;

			&.borb {
				&:before {
					margin: 0 30rpx;
				}
			}

			&:nth-child(6) {
				margin-top: 20rpx;
			}
		}

		.avatar-img {
			width: 62rpx;
			height: 62rpx;
			border-radius: 50%;
		}

		.icon {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}

		.title {
			color: rgba(0, 0, 0, 0.800000011920929);
			font-size: 32rpx;
			font-weight: 400;
		}
	}
	.remark {
		text-align: end;
		width: 400rpx;
		overflow: hidden;    
		text-overflow: ellipsis;    
		white-space: nowrap;
	}
</style>
